<style>
/*#pageBody {background-color: #8666b8}*/
</style>

<section>
  <header><h3>示例</h3></header>
  <article>
    <div class="example">
      <div id="dashboard" class="dashboard dashboard-draggable" data-height="300">
        <header></header>
        <section class='row'>
          <div class="col-md-4 col-sm-6" data-id='1'>
            <div class="panel" data-url='http://baidu.com'>
              <div class="panel-heading">
                <div class="panel-actions">
                  <button class="btn btn-mini refresh-panel"><i class="icon-refresh"></i></button>
                    <div class="dropdown">
                      <button role="button" class="btn btn-mini" data-toggle="dropdown"><span class="caret"></span></button>
                      <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#"><i class="icon-pencil"></i> 编辑</a></li>
                        <li><a href="#" class="remove-panel"><i class="icon-remove"></i> 移除</a></li>
                      </ul>
                    </div>
                  </div>1 <i class="icon-list-ul"></i> Html Panel : dl
                </div>
              <div class="panel-body">
                <dl>
                  <dt>Lorem.</dt>
                  <dd>Lorem ipsum dolor sit amet.</dd>
                  <dt>Ut.</dt>
                  <dd>Necessitatibus, fugit repellat fugiat a.</dd>
                  <dt>Aliquam.</dt>
                  <dd>Obcaecati cum suscipit consequuntur voluptas?</dd>
                  <dt>Minima!</dt>
                  <dd>Esse soluta iure corporis porro.</dd>
                  <dt>Sunt.</dt>
                  <dd>Delectus quos amet quidem eaque!</dd>
                </dl>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-6" data-id='2'>
            <div class="panel" data-url='http://chanzhi.org'>
              <div class="panel-heading">
                <div class="panel-actions">
                  <a href="#"><i class="icon-refresh"></i></a>
                    <div class="dropdown">
                      <a href='#' role="button" data-toggle="dropdown"><span class="caret"></span></a>
                      <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#"><i class="icon-pencil"></i> 编辑</a></li>
                        <li><a href="#" class='refresh-panel'><i class="icon-refresh"></i> 刷新</a></li>
                        <li><a href="#" class="remove-panel"><i class="icon-remove"></i> 移除</a></li>
                      </ul>
                    </div>
                  </div>2 <i class="icon-list-ul"></i> Html Panel : ul
                </div>
              <div class="panel-body">
                <ul>
                  <li>Lorem ipsum dolor sit amet.</li>
                  <li>Corrupti, hic illo a doloribus!</li>
                  <li>Magnam consequatur veniam ullam temporibus.</li>
                  <li>Dolores, nobis ratione dolorem voluptate.</li>
                  <li>Nulla, ratione dignissimos nesciunt sequi.</li>
                  <li>Praesentium, dicta accusamus laborum laboriosam!</li>
                  <li>Facere commodi dolor quasi. Nihil.</li>
                  <li>Esse, similique nulla doloremque dolorum.</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-6" data-id='3'>
            <div class="panel">
              <div class="panel-heading"><div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button><button class="btn btn-mini btn-danger remove-panel"><i class="icon-remove"></i></button></div>3 Html Panel : ol</div>
              <div class="panel-body">
                <ol>
                  <li>Lorem ipsum dolor sit amet.</li>
                  <li>Corrupti, hic illo a doloribus!</li>
                  <li>Magnam consequatur veniam ullam temporibus.</li>
                  <li>Dolores, nobis ratione dolorem voluptate.</li>
                  <li>Nulla, ratione dignissimos nesciunt sequi.</li>
                  <li>Praesentium, dicta accusamus laborum laboriosam!</li>
                  <li>Facere commodi dolor quasi. Nihil.</li>
                  <li>Esse, similique nulla doloremque dolorum.</li>
                </ol>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-6" data-id='4'>
            <div class="panel">
              <div class="panel-heading"><div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div>4 Panel heading</div>
              <div class="panel-body"></div>
            </div>
          </div>
          <div class="col-md-4 col-sm-6" data-id='5'>
            <div class="panel">
              <div class="panel-heading">5 Table<div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div></div>
              <div class="panel-body">
                <table class="table">
                  <tr>
                    <td>Lorem ipsum.</td>
                    <td>Debitis, consectetur.</td>
                    <td>Ullam, asperiores.</td>
                  </tr>
                  <tr>
                    <td>Lorem ipsum.</td>
                    <td>Saepe, mollitia.</td>
                    <td>Placeat, vel!</td>
                  </tr>
                  <tr>
                    <td>Lorem ipsum.</td>
                    <td>Amet, architecto!</td>
                    <td>Natus, quis!</td>
                  </tr>
                  <tr>
                    <td>Lorem ipsum.</td>
                    <td>Quam, nesciunt.</td>
                    <td>Perspiciatis, vel!</td>
                  </tr>
                  <tr>
                    <td>Lorem ipsum.</td>
                    <td>Et, aut!</td>
                    <td>Molestias, necetatibus?</td>
                  </tr>
                  <tr>
                    <td>Lorem ipsum.</td>
                    <td>Fugit, fuga?</td>
                    <td>Iure, officiis.</td>
                  </tr>
                  <tr>
                    <td>Lorem ipsum.</td>
                    <td>Saepe, neque!</td>
                    <td>Deserunt, voluptates?</td>
                  </tr>
                  <tr>
                    <td>Lorem ipsum.</td>
                    <td>Praesentium, eum!</td>
                    <td>Numquam, molestias.</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-6" data-id='6'>
            <div class="panel">
              <div class="panel-heading"><div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div>6 Panel heading</div>
              <div class="panel-body"></div>
            </div>
          </div>
          <div class="col-md-4 col-sm-6" data-id='7'>
            <div class="panel">
              <div class="panel-heading"><div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div>7 Panel heading</div>
              <div class="panel-body"></div>
            </div>
          </div>
          <div class="col-md-4 col-sm-6" data-id='8'>
            <div class="panel">
              <div class="panel-heading"><div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div>8 Panel heading</div>
              <div class="panel-body"></div>
            </div>
          </div>
          <div class="col-md-4 col-sm-6" data-id='9'>
            <div class="panel">
              <div class="panel-heading"><div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div>9 Panel heading</div>
              <div class="panel-body"></div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </article>
</section>

<script>
function onPageLoad() {
  if($.fn.dashboard) $('#dashboard').dashboard({shadowType: 'normal'});
}
</script>
